<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="con">
        <P>
            <label for="">用户名</label>
            <input type="text" id="user" placeholder="6-20位以字母开头,使用数字、字母、下划线、横杠">
        </P>
        <P>
            <label for="">昵称</label>
            <input type="text" id="name" placeholder="输入3-6个中文">
        </P>
        <P>
            <label for="">电子邮件</label>
            <input type="text" id="email" placeholder="数字字母下划线、-@163">
        </P>
        <P>
            <label for="">身份证</label>
            <input type="text" id="shenfen" placeholder="身份证18位数">
        </P>
        <P>
            <label for="">手机号码</label>
            <input type="text" id="tel" placeholder="11位">
        </P>
        <P>
            <label for="">生日</label>
            <input type="text" id="birth">
        </P>
        <P>
            <label for="">密码</label>
            <input type="password" id="pass1" placeholder="6-20位，不能包含空格">
        </P>
        <P>
            <label for="">确认密码</label>
            <input type="password" id="pass2">
        </P>
        <p><input type="checkbox">十天内免登录</p>
        <input type="submit" id="btn" value="提交">
        <input type="reset" id="cancel" value="重置">
    </div>

</body>
<script>
    // ## 4、表单的验证（以下是需求）
    // - 【1】验证账号
    // - 用户名不能为空
    // - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
    // - 必须以字母开头
    // - 长度6-20
    // - 【2】昵称只能输入3-6个中文 ?/[\u4e00-\u9fa5]{3,6}/ 
    // - 【3】电子邮件
    // + 163邮箱：
    // + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
    // + @后面的域名只能是163
    // + 域名后缀（.com .cn .net）可以有多个。
    // 【4】身份证 18位数 后面以为可能是 X x
    // - 【5】手机号码
    // - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
    // - 【6】生日验证
    // + 1999/05/08
    // + 1999-05-08
    // + 19990508
    // - 【7】密码  
    // + 长度小于20 
    // + 不能包含空格 密码不一致
    var user = document.getElementById("user")

    var email = document.getElementById("email")
    var shenfen = document.getElementById("ushenfen")
    var tel = document.getElementById("tel")
    var birth = document.getElementById("birth")
    var pass1 = document.getElementById("pass1")
    var pass2 = document.getElementById("pass2")
    var btn = document.getElementById("btn")
    var cancel = document.getElementById("cancel")

    var reg_user = /^[a-z][0-9a-z_-]{5,19}$/i

    var reg_name = /^[\u4e00-\u9fa5]{3,6}$/
    var str = '你好哦'
    console.log(reg_name.test(str))

    var reg_email = /^[a-z][0-9a-z_\-]{8,15}@163\.(com|cn|net)/i

    var reg_shenfen = /^\d{17}(\d|X|x)$/

    var reg_tel = /^1[35678]\d{9}$/

    var reg_birth = /^\d{4}(\/|-)?\d{2}\1\d{2}$/

    var reg_pass1 = /^[^\s]{6,20}$/

    btn.onclick = function () {
        var user = document.getElementById("user")
        var name = document.getElementById("name")
        var email = document.getElementById("email")
        var shenfen = document.getElementById("shenfen")
        var tel = document.getElementById("tel")
        var birth = document.getElementById("birth")
        var pass1 = document.getElementById("pass1")
        var pass2 = document.getElementById("pass2")
        var btn = document.getElementById("btn")
        var cancel = document.getElementById("cancel")
        if (!reg_user.test(user.value) && user.value !== "") {
            alert("帐号格式错误")
        }
        if (!reg_name.test(name.value)) {
            alert("昵称格式错误")
        }
        if (!reg_email.test(email.value)) {
            alert("邮箱格式错误")
        }
        if (!reg_shenfen.test(shenfen.value)) {
            alert("身份证格式错误")
        }
        if (!reg_tel.test(tel.value)) {
            alert("手机格式错误")
        }
        if (!reg_birth.test(birth.value)) {
            alert("生日格式错误")
        }
        if (!reg_pass1.test(pass1.value)) {
            alert("密码格式错误")
        }
        if(pass2.value !== pass1.value){
            alert("密码输入错误")
            pass1.value=""
        }
    }


</script>

</html>